<template>
	<view class="logo avatar" @click="chooseAvatar">
		<image :src="avatar" />
		<view class="avatar-text" :class="{ hasAvatar }"> 点击上传头像 </view>
	</view>

	<view class="title">注册</view>
	<view class="input" :class="{ focus: isFocus }">
		<text class="input-title">用户名</text>
		<view class="input-card">
			<image src="/static/login/email.png" />
			<input class="uni-input" v-model="account" :focus="isFocus" placeholder="请输入用户名"
				placeholder-style="color: #ffffff" @focus="handleFocus" @blur="handleBlur" />
		</view>
	</view>

	<view class="input" :class="{ focus: isPasswordFocus }">
		<text class="input-title">密码</text>
		<view class="input-card">
			<image src="/static/login/pwd.png" />
			<input ref="passwordRef" v-model="password" class="uni-input password" :focus="isPasswordFocus"
				:cursor="cursorPosition" :password="showPassword" type="text" placeholder="请输入密码"
				placeholder-style="color: #ffffff" @focus="handlePasswordFocus" @blur="handlePasswordBlur" />
			<image :class="{ eye: !showPassword }" src="/static/login/eye.png" @click="changePasswordShow" />
		</view>
	</view>

	<view class="input" :class="{ focus: ispasswordCheckFocus }">
		<text class="input-title">确认密码</text>
		<view class="input-card">
			<image src="/static/login/pwd.png" />
			<input ref="passwordRef" v-model="passwordCheck" class="uni-input password" :focus="ispasswordCheckFocus"
				:cursor="passwordCheckCursorPosition" :password="showPasswordCheck" type="text" placeholder="请输入密码"
				placeholder-style="color: #ffffff" @focus="handlepasswordCheckFocus" @blur="handlePasswordCheckBlur" />
			<image :class="{ eye: !showPasswordCheck }" src="/static/login/eye.png" @click="changePasswordCheckShow" />
		</view>
	</view>

	<view class="input check">
		<view class="check-view">
			<checkbox-group @change="handleChange">
				<checkbox value="checkValue" color="#B8CEF6" backgroundColor="transparent" borderColor="#B8CEF6"
					activeBackgroundColor="transparent" activeBorderColor="#B8CEF6" />
			</checkbox-group>
		</view>
		<text class="check-info">请勾选协议</text>
	</view>

	<view class="input">
		<button @click="handleSingup">
			<text>注册</text>
			<image src="/static/login/user.png" />
		</button>
	</view>

	<view class="footer">
		<text class="footer-text">已有账号？</text>
		<text class="footer-text signUp" @click="goSignIn">登录</text>
	</view>
</template>

<script setup>
	// 导入vue的ref函数和自定义的useInputHook钩子
	import {
		ref
	} from 'vue';
	import useInputHook from '../login.js';
	import {
		register,
		uploadFile
	} from '@/api/user.js';
	import {
		toast
	} from '@/utils/index.js';

	// 定义emits函数用于emit事件
	const emits = defineEmits(['changeVisible']);

	// 初始化用户名检查值
	const checkValue = ref('');

	// 用户头像默认路径
	const avatar = ref('/static/logo.png');

	// 标记是否有头像
	const hasAvatar = ref(false);

	// 头像文件
	const avatarFiles = ref([]);

	// 使用useInputHook钩子管理用户名的输入状态
	const {
		inputValue: account,
		isFocus,
		handleFocus,
		handleBlur
	} = useInputHook();

	// 使用useInputHook钩子管理密码的输入状态
	const {
		showPassword,
		inputValue: password,
		isFocus: isPasswordFocus,
		cursorPosition,
		handleFocus: handlePasswordFocus,
		changePasswordShow,
		handleBlur: handlePasswordBlur,
	} = useInputHook();

	// 使用useInputHook钩子管理确认密码的输入状态
	const {
		showPassword: showPasswordCheck,
		inputValue: passwordCheck,
		isFocus: ispasswordCheckFocus,
		cursorPosition: passwordCheckCursorPosition,
		handleFocus: handlepasswordCheckFocus,
		changePasswordShow: changePasswordCheckShow,
		handleBlur: handlePasswordCheckBlur,
	} = useInputHook();

	// 处理输入框内容变化
	const handleChange = (e) => {
		checkValue.value = e.detail.value;
	};

	// 选择头像
	const chooseAvatar = async () => {
		const files = await new Promise((resolve, reject) => {
			uni.chooseImage({
				count: 1, // 选择一张图片
				extension: ['png', 'jpg', 'jpeg'], // 图片格式限定
				sourceType: ['album'], // 仅从相册选择
				success: async (res) => {
					console.log('tempFilePaths-->', res);
					avatar.value = res.tempFilePaths[0]; // 设置头像路径
					hasAvatar.value = true; // 标记有头像
					// const uploadRes = await uploadFile(res.tempFiles[0])
					// console.log("res-->", uploadRes)
					resolve(res.tempFiles);
				},
				fail: (err) => {
					console.log('err-->', err);
					hasAvatar.value = false; // 选择失败时清除头像标记
					reject(err);
				},
			});
		});
		console.log('result--->', files);
		avatarFiles.value = files;
	};

	// 转到登录页面
	const goSignIn = () => {
		emits('changeVisible', true);
	};

	// 处理注册按钮点击
	const handleSingup = async () => {
		if (!account.value) {
			return toast('请输入用户名', 'error');
		}

		if (!password.value) {
			return toast('请输入密码', 'error');
		}

		if (!passwordCheck.value) {
			return toast('请输入确认密码', 'error');
		}

		if (!/^[A-Za-z0-9]{2,20}$/.test(account.value)) {
			return toast('用户名格式错误', 'error');
		}

		if (!/^[A-Za-z0-9]{5,20}$/.test(password.value)) {
			return toast('密码格式错误', 'error');
		}

		if (password.value != passwordCheck.value) {
			return toast('两次密码不一致', 'error');
		}
		if (checkValue.value.length == 0) {
			return toast('请勾选协议', 'error');
		}
		console.log('checkValue.value-->', checkValue.value);

		if (avatarFiles.value.length > 0) {
			const uploadRes = await uploadFile(avatarFiles.value[0]);
			console.log('res-->', uploadRes);
			avatar.value = uploadRes.data.data.url;
		}

		const res = await register(account.value, password.value, avatar.value);
		if (res.code == 200) {
			goSignIn();
		}
		// console.log("res-->", res)
		// goSignIn();
	};
</script>

<style lang="scss" scoped>
	@import '../login.scss';
</style>